<script setup>
import { ref, onMounted } from 'vue'
import myAxios from '../../../plugins/myAxios'
import { ElMessage } from 'element-plus'

// 表单数据
const feedbackForm = ref({
  feedbackType: '',
  feedbackContent: ''
})

// 反馈列表
const feedbackList = ref([])

// 反馈类型选项
const feedbackTypes = [
  { value: 1, label: '考试内容问题' },
  { value: 2, label: '测试建议' },
  { value: 3, label: '其他' }
]

// 获取反馈列表
const getFeedbackList = async () => {
  try {
    const res = await myAxios.get('/student/feedback/my')
    feedbackList.value = res
  } catch (error) {
    ElMessage.error(error || '获取反馈列表失败')
  }
}

// 提交反馈
const submitFeedback = async () => {
  try {
    await myAxios.post('/student/feedback/submit', feedbackForm.value)
    ElMessage.success('反馈提交成功')
    feedbackForm.value = { feedbackType: '', feedbackContent: '' }
    getFeedbackList()
  } catch (error) {
    ElMessage.error(error || '提交反馈失败')
  }
}

onMounted(() => {
  getFeedbackList()
})
</script>

<template>
  <div class="feedback-container">
    <!-- 反馈表单 -->
    <div class="feedback-form">
      <h2>提交反馈</h2>
      <el-form :model="feedbackForm" label-width="100px">
        <el-form-item label="反馈类型">
          <el-select v-model="feedbackForm.feedbackType" placeholder="请选择反馈类型">
            <el-option
              v-for="type in feedbackTypes"
              :key="type.value"
              :label="type.label"
              :value="type.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="反馈内容">
          <el-input
            v-model="feedbackForm.feedbackContent"
            type="textarea"
            rows="4"
            placeholder="请输入反馈内容"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFeedback">提交反馈</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 反馈列表 -->
    <div class="feedback-list">
      <h2>我的反馈</h2>
      <el-table :data="feedbackList" style="width: 100%">
        <el-table-column prop="feedbackType" label="反馈类型" :formatter="(row) => {
          const type = feedbackTypes.find(t => t.value === row.feedbackType)
          return type ? type.label : ''
        }" />
        <el-table-column prop="feedbackContent" label="反馈内容" />
        <el-table-column prop="submitTime" label="提交时间" />
        <el-table-column prop="status" label="状态" :formatter="(row) => {
          const statusMap = { 0: '待处理', 1: '已回复', 2: '已关闭' }
          return statusMap[row.status]
        }" />
        <el-table-column prop="replyContent" label="回复内容" />
        <el-table-column prop="replyTime" label="回复时间" />
        <el-table-column prop="replyBy" label="回复人" />
      </el-table>
    </div>
  </div>
</template>

<style scoped>
.feedback-container {
  padding: 20px;
}

.feedback-form {
  margin-bottom: 30px;
  max-width: 800px;
}

.feedback-list {
  margin-top: 20px;
}

h2 {
  margin-bottom: 20px;
  color: #333;
}
</style>
